<template>
    <div class="from-input-number" @mouseenter="onMouseenter" @mouseleave="onMouseleave">
        <el-input-number v-bind="attrs" :controls="controls" @blur="onBlur" @focus="onFocus" />
    </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref } from 'vue';
const instance = getCurrentInstance();
const { attrs }: any = instance;

/**
 * 是否是焦点
 */
const isFocus = ref(false);
/**
 * 是否显示右侧控件
 */
const controls = ref(false);

/**
 * 失去焦点时隐藏控件
 */
const onBlur = () => {
    isFocus.value = false;
    controls.value = false;

    if (!attrs.modelValue) {
        return attrs['onUpdate:modelValue']?.(attrs.min);
    }

    if (attrs.min || attrs.min === 0) {
        if (attrs.modelValue < attrs.min) {
            attrs['onUpdate:modelValue']?.(attrs.min);
        }
    }

    if (attrs.max || attrs.max === 0) {
        if (attrs.modelValue > attrs.max) {
            attrs['onUpdate:modelValue']?.(attrs.max);
        }
    }
};

/**
 * 获取焦点时展示控件
 */
const onFocus = () => {
    isFocus.value = true;
    controls.value = true;
};

/**
 * 光标移入时展示控件
 */
const onMouseenter = () => {
    controls.value = true;
};

/**
 * 光标移出时非焦点的情况下隐藏控件
 */
const onMouseleave = () => {
    if (!isFocus.value) {
        controls.value = false;
    }
};
</script>

<style lang="scss" scoped>
.from-input-number {
    display: inline-flex;
    :deep(.el-input-number) {
        .el-input__wrapper {
            padding-left: 12px !important;
        }
    }
}
</style>
